<template>
  <!-- 行业人才需求、企业人才需求 -->
  <div class="chartMain">
    <div class="chartOuter" v-if="wordData.length > 0">
      <div ref="wordcloud" style="width: 100%; height: 500px"></div>
    </div>
    <el-empty class="empty" description="暂无数据" v-else
      ><el-button type="primary" size="mini" @click="handleKnowClick()">
        想要了解
      </el-button></el-empty
    >
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import 'echarts-wordcloud';
import { init } from 'echarts';
import { reportLackDataPosition } from '@/api/salary';

export default {
  name: 'WordCloud',
  props: {
    //数据对象数组,结构如下
    // [   { name: "Vue", value: 10000, textStyle: { color: "#FF5733" } },
    //     { name: "JavaScript", value: 6181, textStyle: { color: "#33FF57" } },
    //     { name: "ECharts", value: 4386, textStyle: { color: "#3357FF" } },
    //     { name: "WordCloud", value: 4055, textStyle: { color: "#FF33A1" } },
    //     { name: "Plugin", value: 2467, textStyle: { color: "#FFD433" } },
    //     { name: "Chart", value: 2244, textStyle: { color: "#33FFF5" } },
    //     { name: "Visualization", value: 1898, textStyle: { color: "#FF5733" } },
    // ]
    wordData: {
      type: Array,
      default: () => []
    },
    layerId: {
      type: String,
      default: '186'
    },
    wordInfo: {}
  },
  watch: {
    wordData: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        if (newValue && newValue.length) {
          this.$nextTick(() => {
            this.initWordCloud();
          });
        }
      }
    }
  },
  data() {
    return {};
  },
  mounted() {
    // this.initWordCloud();
  },
  methods: {
    initWordCloud() {
      const chart = init(this.$refs.wordcloud);
      const option = {
        tooltip: {},
        series: [
          {
            type: 'wordCloud',
            gridSize: 25,
            sizeRange: [12, 50],
            rotationRange: [0, 0],
            shape: 'circle',
            width: '100%',
            height: '100%',
            drawOutOfBound: false,
            layoutAnimation: true,
            textStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            data: this.wordData
          }
        ]
      };

      chart.setOption(option);
      this.chart = chart;
    },
    handleKnowClick() {
      const userInfo = JSON.parse(localStorage.getItem('userInfo')); //OA的userInfo和SaaS登录的userInfo不一样
      const oaId = '';
      if (userInfo && userInfo.user_source_id) {
        oaId = userInfo.user_source_id;
      }
      const params = {
        positionId: this.$route.query.id,
        positionName: this.$route.query.name,
        layerId: this.layerId,
        layerName: this.layerId == '186' ? '行业人才需求' : '企业人才需求',
        personId: localStorage.getItem('personId') || '',
        oaId: oaId
      };
      reportLackDataPosition(params).then((response) => {
        if (response.code == 200) {
          this.$message.success('已成功提交');
        } else {
          this.$message.error(res.status_desc);
        }
      });
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  }
};
</script>

<style lang="scss" scoped>
.chartMain {
  display: flex;
  align-items: center;
  width: 100%;
  flex: 1;
  .empty {
    margin: auto;
    ::v-deep .el-empty__image {
      width: 150px;
    }
  }
  .chartOuter {
    display: flex;
    align-items: center;
    width: 100%;
    .chartDesc {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 10px 10px 10px 10px;
      .chartDescItem {
        margin: 10px 0;
        width: 48%;
        .chartDescTitle {
          color: #555;
          font-size: 15px;
        }
        .chartDescNum {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: baseline;
          -ms-flex-align: baseline;
          align-items: baseline;
          color: #1b78ff;
          font-size: 24px;
          font-weight: 700;
          margin-top: 22px;
          font-family: D-DIN-PRO-500-Medium;
        }
      }
    }
  }
  .empty {
    flex: 1;
    height: 300px;
  }
}
</style>
